<!--  -->
<template>
  <div class="home">
    <section ion class="container-main-header">
      <section class="header-left">
        <i class="el-icon-menu"></i>
        <span>首页</span>/
        <span>商品</span>/
        <span>商品分类</span>
        <i class="el-icon-pear"></i>
      </section>
      <section class="datalist-box">
        <section class="datalist" style="margin-top:20px;">
          <section class="datalist-box">
            <i class="el-icon-document"></i>&nbsp;&nbsp;
            <span>数据列表</span>
            <el-button
              class="addactivity"
              style="float: right;padding:6px 14px"
              @click="addProductCate"
            >添加</el-button>
          </section>
        </section>
        <section class="goodList">
          <el-table
            :data="tableData.slice((currentPage - 1) * pageSize, 
			currentPage*pageSize)"
            border
            style="width: 100%" >
            <el-table-column prop="id" label="编号" width="100" align="center"></el-table-column>
            <el-table-column prop="type" label="分类名称" align="center"></el-table-column>
            <el-table-column prop="level" label="级别" width="100" align="center"></el-table-column>
            <el-table-column prop="quantify" label="数量单位" width="100" align="center"></el-table-column>
            <el-table-column prop="goodscount" label="商品数量" width="100" align="center"></el-table-column>
            <el-table-column prop="quantify" label="数量单位" width="100" align="center"></el-table-column>
            <el-table-column label="导航栏" width="100" align="center">
              <!-- <el-switch
                                    v-model="value1"
                                    active-text=""
                                    inactive-text="">
              </el-switch>-->
              <template slot-scope="scope">
                <el-switch v-model="scope.row.value1" active-text inactive-text></el-switch>
              </template>
            </el-table-column>
            <el-table-column label="是否显示" width="100" align="center">
              <template slot-scope="scope">
                <el-switch v-model="scope.row.value2" active-text inactive-text></el-switch>
              </template>
            </el-table-column>
            <el-table-column prop="sort" label="排序" width="100" align="center"></el-table-column>
            <el-table-column prop="set" label="设置" width="200" align="center">
              <el-row class>
                <el-button size="mini">查看下级</el-button>
                <el-button size="mini">转移商品</el-button>
              </el-row>
            </el-table-column>
            <el-table-column label="操作" width="200" align="center">
              <template slot-scope="scope">
                <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)"
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </section>
        <section class="block">
          <span class="demonstration"></span>
          <el-pagination
            @size-change="handleSizeChange"
            background
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5,10]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="tableData.length"
          ></el-pagination>
        </section>
      </section>
    </section>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
// import Common from "@/components/Common.vue";
export default {
  //import引入的组件需要注入到对象中才能使用

    data() {
    return {
        tableData: [{
          id: '1',
          type: '服装',
          level: '一级',
          goodscount: '100',
          quantify: '件',
          sort:'1',
          value1: true,
        }, {
          id: '2',
          type: '手机数码',
          level: '一级',
          goodscount: '100',
          quantify: '件',
          sort:'1',
          value2: true,
        }, {
          id: '3',
          type: '家用电器',
          level: '一级',
          goodscount: '100',
          quantify: '件',
          sort:'1',
					value1: true,
					value2: true,
        }, {
          id: '4',
          type: '家具家装',
          level: '一级',
          goodscount: '100',
          quantify: '件',
          sort:'1',
          value1: false,
        }, {
          id: '5',
          type: '汽车用品',
          level: '一级',
          goodscount: '100',
          quantify: '件',
          sort:'1',
          value1: true,
          value2: true,
        }, {
          id: '6',
          type: '汽车用品',
          level: '一级',
          goodscount: '100',
          quantify: '件',
          sort:'1',
          value1: true,
          value2: true,
         } ],
				currentPage: 1,
					pageSize: 5,
					total: 0, // 总条目数
					multipleSelection: [],
					border: true,
					select: "",
					input: "",
					value1: "",
					border: true,
				};
    },
        methods: {
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.pageSize=val;
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.currentPage=val;
            },
            addProductCate() {
                this.$router.push({
                    path: '/addProductCate'
                })
            },
            handleEdit(index, item){
                console.log(index, item)
                this.$router.push({
                    path:'addProductCate',
                    query: item
                })
            },
            handleDelete(index, item){
                // item.level = '耳机'
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                this.tableData.splice(index, 1)
                this.$message({
                        type: 'success',
                        message: '删除成功!'
                });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });          
                });
          }
        }
    };
</script>
<style  scoped>
.home {
  display: flex;
}
.main {
  flex: 1;
}
.container-main-header {
  text-align: left;
  /* padding: 0 20px; */
  width: 100%;
  display: flex;
  flex-direction: column;
}
.container-main-header .el-icon-pear {
  float: right;
  line-height: 50px;
  margin-right: 20px;
}
.header-left {
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #ccc;
}
.header-left span {
  margin: 5px;
  font-size: 14px;
}
.el-icon-menu {
  margin-right: 20px;
}
.el-icon-pear {
  font-size: 24px;
}
.datalist-box {
  margin: 0 20px;
}
.datalist {
  border: 1px solid #ebeef5;
  background-color: #fff;
  color: #303133;
  border-radius: 4px;
}
.app-main .miaosha-box .search-Box .search-box,
.datalist-box {
  padding: 20px;
}
.app-main .miaosha-box .miaosha-input {
  /* width: 380px; */
  height: 32px;
  display: flex;
  align-items: center;
  font-size: 12px;
  margin-top: 30px;
}
.app-main .miaosha-box .miaosha-input span {
  /* width: 130px; */
  margin-left: 60px;
  font-size: 16px;
}
.goodList {
  margin-top: 20px;
}
.block {
  float: right;
  margin-top: 10px;
}
</style>